<template>
    <view class="detailmap_contain">
        <MyMap class="map" :style="{ height: (expand ? 50 : 75) + 'vh' }" />
        <view class="order">
            <view class="header" style="margin-bottom: 20rpx">
                <view class="box" style="padding: 24rpx; box-sizing: border-box">
                    <view class="flexBox" style="font-size: 22rpx">
                        <view class="jiMsg">寄</view>
                        <view style="margin-left: 12rpx">承运单号：{{ list.billNo }}</view>
                    </view>
                    <view class="box01" style="width: 620rpx">
                        <view class="left">
                            <span>{{ list.startBranchName }}</span>
                            <span>{{ list.shipper }}</span>
                        </view>
                        <view class="center">
                            <span>{{ list.statusVal }}</span>
                            <span></span>
                        </view>
                        <view class="right">
                            <span>{{ list.destinationBranchName }}</span>
                            <span>{{ list.receiver }}</span>
                        </view>
                    </view>
                    <view class="flexBox2">
                        <view>下单时间：{{ dayjs(list.billingTime).format('YYYY-MM-DD') }}</view>
                        <view class="flexBox" style="align-items: center;" @click="goDetail">
                            运单详情&nbsp;
                            <RectRight />
                        </view>
                    </view>
                </view>
            </view>
            <view class="foot">
                <nut-steps direction="vertical" :active="0" v-if="expand" style="height: 25vh;overflow: auto;">
                    <nut-step v-for="(item, index) in logisticsInfo" :key="index"
                        :title="dayjs(item.creaTetime).format('YYYY-MM-DD')" :content="item.eventType">
                    </nut-step>
                </nut-steps>
                <view class="no" @click="expand = !expand">
                    <view style="font-size: 30rpx">
                        {{ expand ? "隐藏物流信息" : "展开物流信息" }}
                    </view>
                    <image src="../../assets/images/我要发货/icon_展开@2x.png" style="width: 30rpx; height: 30rpx"
                        v-if="!expand" />
                    <image src="../../assets/images/我要发货/icon_折叠@2x.png" style="width: 30rpx; height: 30rpx" v-else />
                </view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import useOrderStore from '@/store/order';
import Taro from '@tarojs/taro';
import dayjs from 'dayjs';
import { ref } from 'vue';
import MyMap from '@/components/Mymap/index.vue'
import { RectRight } from '@nutui/icons-vue-taro';
const orderStore = useOrderStore()

const expand = ref(false)
const list = orderStore.orderInfo
// 物流详情
const logisticsInfo = orderStore.logisticsInfo.trajectorys


function goDetail() {
    Taro.navigateTo({
        url: '../details/index'
    })
}

</script>
<style lang="scss">
.detailmap_contain {
    height: 100vh;
    position: relative;

    .box01 {
        margin: 12rpx 0 24rpx;
        position: relative;

        &::before {
            position: absolute;
            left: -4rpx;
            top: 4rpx;
            content: "";
            display: inline-block;
            width: 30rpx;
            height: 30rpx;
        }

        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        padding-left: 10rpx;

        // border: 1px solid #ccc;
        .left,
        .center,
        .right {
            display: flex;
            flex-direction: column;
            justify-content: center;

            span {
                &:nth-child(1) {
                    color: #252525;
                    font-size: 28rpx;
                    font-weight: 600;
                    margin-bottom: 10rpx;
                }

                &:nth-child(2) {
                    font-size: 24rpx;
                    font-weight: 400;
                }
            }
        }

        .left {
            flex: 1;
            align-items: flex-start;
            position: relative;
            padding-left: 32rpx;
        }

        .center {
            align-items: center;

            span {

                //   &:nth-child(1) {
                //     color: #0966ff;
                //   }
                &:nth-child(2) {
                    width: 184rpx;
                    height: 4rpx;
                    background: #252525;
                    position: relative;
                    color: #252525;

                    &::before {
                        content: "";
                        width: 0;
                        height: 0;
                        border-left: 10rpx solid transparent;
                        border-right: 10rpx solid transparent;
                        border-bottom: 10rpx solid #252525;
                        position: absolute;
                        top: -6rpx;
                        right: -4rpx;
                    }
                }
            }
        }

        .right {
            align-items: flex-end;
            flex: 1;
        }
    }

    .flexBox {
        display: flex;
    }

    .flexBox2 {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        color: #999999;
        margin-top: 40rpx;
        line-height: 24rpx;
    }

    .jiMsg {
        height: 24rpx;
        width: 24rpx;
        background: #ff8a00;
        color: white;
        font-size: 18rpx;
        line-height: 24rpx;
        text-align: center;
        margin-top: 2rpx;
        border-radius: 2px;
    }

    .order {
        width: 100%;
        position: absolute;
        bottom: 0;
    }

    .foot {
        width: 95%;
        background-color: #ffffff;
        padding: 0 20rpx;
        flex-direction: column;
        justify-content: flex-end;
    }

    .no {
        width: 100%;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .zzzz {
        font-size: 30rpx;
        height: auto;
    }
}
</style>